var picth = document.querySelectorAll(".lunbo img");
// console.log(picth);
var li = document.querySelectorAll(".xiaofangkuai  li");
// console.log(li);
var oLunb=document.querySelector('.lunbo');
console.log(oLunb)

var t = null;//



var init = 0;//默认为第一张图片


//时间函数
function chang() {
    t = setInterval(function () {
        //计次
        init++;
        if (init >= 4) {
            init = 0;
        }


        oLunb.style.left = init * -416 + "px"; //做左移动
        //导航数字切换
        for (var i = 0, len = li.length; i < len; i++) {
            li[i].className = "";
        }
        li[init].className = "red1";
        console.log(  li[init])
    }, 2000);


}
chang();//开始动画


//   //鼠标移到图片停止动画
oLunb.onmouseover = function () {
      clearInterval(t);
  }
  oLunb.onmouseout = function () {
      //封装一个函数，调用
      chang();
  }




//导航数字的移动方向与图片一致






//数字循环
for (var j = 0, len = li.length; j < len; j++) {
    li[j].index = j;//给个点击的值
    //注册事件
    li[j].onmouseover = function () {
        clearInterval(t);
        init = this.index;//图片的位置属性和所单击的数字一致
        oLunb.style.left = init * -416 + "px";
        for (var i = 0, len = li.length; i < len; i++) {
            li[i].className = "";
        }
        //当前的li，加上on
        li[init].className = "red1";
    }
}